<template>
  <div class="t-table-single-edit-cell" style="width:100%;">
    <WfTable
      :table="singleEditConfig.table"
      :columns="singleEditConfig.table.columns"
      :listTypeInfo="singleEditConfig.listTypeInfo"
      @handleEvent="handleEvent"
      @save="singleSave"
    >
      <!-- 自定义单元格编辑组件(多选下拉选择) -->
      <template #editHobby="{scope}">
        <el-select v-model="scope.row[scope.column.property]" multiple @change="handleEvent(scope.column.property, scope.row[scope.column.property])">
          <el-option
            v-for="item in singleEditConfig.listTypeInfo.xxxList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <!-- 自定义单元格编辑组件（自动完成） -->
  <!--    <template #autocomplete="{scope}">
        <el-autocomplete
          clearable
          :debounce="0"
          class="inline-input"
          v-model="scope.row[scope.column.property]"
          :fetch-suggestions="querySearch"
          @clear="clearSelect"
          placeholder="请输入内容"
        ></el-autocomplete>
      </template>-->
    </WfTable>
    <el-button @click="printTableData">打印</el-button>
    <el-button @click="addRow">添加一行</el-button>
  </div>
</template>

<script>
  import WfTable from '../component/table/src/index';
  export default {
    name: 'TtableSingleEditCell',
    components:{
      WfTable
    },
    data () {
      return {
        // 编辑某个单元格
        singleEditConfig: {
          table: {
            border: true,
            firstColumn: { type: 'index', label: '序列' }, // 显示序列号
            data: [
              {
                name: '张三',
                hobby: '1',
                hobby1: ['1', '2'],
                // autocomplete: '三全鲜食（北新泾店）',
                year: '2022',
                time: '2022-01-18 16:58:58',
                remake: '备注张三',
                number: 12
              },
              {
                name: '李四',
                hobby: '2',
                hobby1: ['0', '2'],
                // autocomplete: '三全鲜食（北新泾店）',
                year: '2021',
                time: '2022-01-19 16:58:58',
                remake: '备注李四',
                number: 15
              },
              {
                name: '李四2',
                hobby: '2',
                hobby1: ['1', '2'],
                // autocomplete: '三全鲜食（北新泾店）',
                year: '2021',
                time: '2022-01-19 16:58:58',
                remake: '备注李四2',
                number: 56
              }
            ],
            columns: [
              {
                prop: 'name',
                label: '姓名',
                minWidth: '150',
                canEdit: true,// 默认是输入框
                renderHeader: (h, { column }) => {
                  const style = {
                    color: '#F56C6C',
                    fontSize: '16px',
                    marginRight: '3px'
                  }
                  return (
                    <div>
                      <span style={style}>*</span>
                      <span>{column.label}</span>
                    </div>
                  )
                },
                // 前缀prepend 测试
              /*  configEdit: {
                  label: '姓名',
                  width:100,
                  type: 'input',
                  editComponent: 'el-input',
                  prepend:"http"
                }*/
              },
              {
                prop: 'hobby',
                label: '爱好单选',
                minWidth: '180',
                headerRequired: true,
                canEdit: true,
                configEdit: {
                  label: '爱好单选',
                  type: 'select-arr',
                  editComponent: 'el-select',
                  list: 'hobbyList',
                  // event: 'hobbyList',
                  arrLabel: 'label',
                  arrKey: 'value',
                  prepend:"http"
                }
              },
              {
                prop: 'hobby1',
                label: '编辑组件插槽',
                minWidth: '180',
                renderHeader: (h, { column }) => {
                  return (
                    <div>
                      <span>{column.label}</span>
                      <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
                    </div>
                  )
                },
                canEdit: true,
                configEdit: {
                  label: '编辑组件插槽',
                  type: 'el-select-multiple',
                  editComponent: 'el-select',
                  editSlotName: 'editHobby'
                }
              },
          /*    {
                prop: 'autocomplete',
                label: '自动完成',
                minWidth: '180',
                canEdit: true,
                configEdit: {
                  label: '自动输入完成',
                  // type: 'el-select-multiple',
                  editComponent: 'el-autocomplete',
                  editSlotName: 'autocomplete'
                }
              },*/
        /*      {
                prop: 'year',
                label: '日期年',
                minWidth: '180',
                canEdit: true,
                configEdit: {
                  label: '日期年',
                  type: 'year',
                  editComponent: 'el-date-picker',
                  bind: { valueFormat: 'yyyy' }
                }
              },*/
              {
                prop: 'time',
                label: '日期时间',
                minWidth: '180',
                canEdit: true,
                configEdit: {
                  label: '日期时间',  // placeholder
                  type: 'datetime',
                  editComponent: 'el-date-picker',
                  bind: {
                    valueFormat: 'yyyy-MM-dd hh:mm:ss'
                  }
                }
              },
              {
                prop: 'number',
                label: '计数器',
                minWidth: '220',
                canEdit: true,
                configEdit: {
                  label: '计数器',
                  type: 'inputNumber',
                  bind: { min: 0, max: 99 },
                  editComponent: 'el-input-number'
                }
              },
              {
                prop: 'remake',
                label: '备注',
                minWidth: '220',
                canEdit: true,
                configEdit: {
                  label: '备注',
                  type: 'textarea',
                  bind: { type: 'textarea' },
                  editComponent: 'el-input',
                }
              }
            ],
            // 表格内操作列
            operator: [
              {
                type: 'danger',
                text: '删除',
                fun: this.editDel
              }
            ]
          },
          // 下拉选择项
          listTypeInfo: {
            hobbyList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' },
              { label: '美剧', value: '2' },
              { label: '旅游', value: '3' },
              { label: '音乐', value: '4' }
            ],
            xxxList:[
              { label: '吉他1', value: '0' },
              { label: '看书1', value: '1' },
              { label: '美剧1', value: '2' },
              { label: '旅游1', value: '3' },
              { label: '音乐1', value: '4' }
            ],
          },
          // autoOption: [
          //   { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
          //   { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
          //   { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
          //   { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
          //   { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
          //   { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
          //   { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
          //   { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
          //   { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' }
          // ]
        }
      }
    },
    methods: {
      /**
       * 自动完成组件
       */
   /*   querySearch (queryString, cb) {
        var restaurants = this.singleEditConfig.autoOption
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },*/
   /*   createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },*/
      // clearable清除事件事件
      clearSelect () {
        // 主要代码
        // this.$refs.parentCom.activated = true
        // document.activeElement获得了DOM中被聚焦的元素；.blur()取消聚焦
        document.activeElement.blur()
        this.$forceUpdate()
      },
      singleSave (data) {
        console.log('单个单元格编辑保存', data)
      },
      editDel (row, index, tableData) {
        // row.splice(index, 1)
        console.log('删除', row, index, tableData)
      },
      // 编辑每一项的change事件
      handleEvent (type, val,index) {
        console.log( type, val,index)

      },
      printTableData(){
        console.log("table.data",this.singleEditConfig.table.data)
      },
      addRow(){
       let obj =  {
          name: '李四2',
          hobby: '2',
          hobby1: ['1', '2'],
          // autocomplete: '三全鲜食（北新泾店）',
          time: '',
          remake: '备注李四2',
          number: 56
        }
        this.singleEditConfig.table.data.push(obj)
      }
    }
  }
</script>
